<template>
	<view class="">
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			
			<view class="intro_info">
				<view class="intro_title">{{certificateInfo.name}}</view>
				<view class="intro_date">
					<view class="">使用截止日期：{{certificateInfo.end_at}}</view>
				</view>
				<view class="intro_img">
					<image :src="certificateInfo.intro_image" mode="widthFix"></image>
				</view>
				<view class="intro_content">{{certificateInfo.intro}}</view>
				<view class="car_names">
					适用车型：{{certificateInfo.car_names}}
				</view>
				<view class="car_names">
					部分车型最高可减免：￥{{certificateInfo.oprice}}
				</view>
			</view>
			
			<view class="transaction">
				<view class="transaction_top flex align-center" @tap.stop="changeAgreement">
					<image v-if="status_show" class="transaction_top_img" :src='STATIC_URL+"7.png"'></image>
					<image v-else class="transaction_top_img" :src='STATIC_URL+"8.png"'></image>
					<text>已阅读并同意</text>
					<text class="transaction_top_text" @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/denglu/agreement/agreement?aid=13`">《支付协议》</text>
				</view>
				<view class="money_footer">
					<view class="footer_le flex align-center justify-between">
						<view class="footer_le_1">
							<text>￥</text>
							<text class="footer_le_1_1">{{totalPrice}}</text>
							<text class="footer_le_1_2">
								<text class="footer_le_1_3">￥</text>
								<text>{{certificateInfo.oprice}}</text>
							</text>
						</view>
						<view class="box_info">
							<u-number-box bg-color="#FC5B03" color="#fff"  v-model="num" size="22" :min="1" :max="20" @change="valChange"></u-number-box>
						</view>
					</view>
					<view class="footer_ri">
						<view class="footer_ri_2" @tap.stop="buyCoupon">立即购买</view>
					</view> 
				</view>
			</view>
			<view class="customer_view" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/customer/customer`">
				<view class="flex align-center">
					<image :src='STATIC_URL+"289.png"'></image>
					<view class="customer_btn_text">人工客服</view>
				</view>
				<view class="customer_btn_text">08:00 - 21:00</view>
			</view>
			
			<view style="height: 210rpx;"></view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				status_show: true,
				certificateInfo: {},
				num: 1,
				totalPrice: 0,
				id: "42355475181867008",  // 团购商品id
			}
		},
		onLoad(options) {
			let { id } = options;
			if (id !== undefined) this.id = id;
			this.getDetails();
		},
		onShow() {
			
		},
		methods: {
			// 获取团购商品详情  groupCoupon
			getDetails() {
				this.$api.get(global.apiUrls.groupCoupon, {
					id: this.id
				}).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.certificateInfo = res.data.data;
						this.totalPrice = res.data.data.price * this.num;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 购买团购券
			buyCoupon() {
				let _this = this;
				if (!global.token) {
					uni.navigateTo({
						url: '/pages/tabBar/login/login'
					})
					return;
				}
				if (!_this.status_show) {
					_this.$message.info('请阅读并同意支付协议');
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				let skulist = [{
					quantity: _this.num, // 购买数量 必填
					// price: 1900, // 商品价格 必填
					price: Number(_this.totalPrice) * 100, // 商品价格 必填
					discountAmount: 0,
					skuId: String(_this.certificateInfo.out_id),
					// goodsId: '7399923302912788543', // 商品ID 必填
					skuType: 1, // 商品类型 必填
					goodsInfo: {
						goodsName: _this.certificateInfo.name, // 商品名称 必填
						goodsPhoto: _this.certificateInfo.image, // 商品图片链接 必填
						goodsId: String(_this.certificateInfo.out_id), // 商品ID 必填
						goodsType: 1
					}
				}]
				let totalAmount = _this.totalPrice * 100
				// console.log(global.apiUrls.callbackUrl);
				let callbackInfo = 'tg|' + global.userInfo.user_id;
				// console.log(skulist);
				// console.log(callbackInfo);
				setTimeout(() => {
					uni.hideLoading();
				}, 300)
				tt.createOrder({
					skuList: skulist,
					payment: {
						totalAmount: totalAmount, // 订单总价 必填
					},
					callbackData: {
						order_no: callbackInfo
					},
					callbackUrl: global.apiUrls.callbackUrl, 
					success: (res) => {
						const {
							orderId,
							outOrderNo
						} = res;
						console.log("success res", res);
						console.log("orderId", orderId, "outOrderNo", outOrderNo);
						setTimeout(() => {
							_this.is_submit = false;
							uni.redirectTo({
								url: '/pages/my/myCoupon/myCouponDetail?id=' + outOrderNo
							})
						}, 800)
					},
					fail: (res) => {
						const {
							orderId,
							outOrderNo,
							errNo,
							errMsg,
							errLogId
						} = res;
						if (errLogId) {
							console.log("预下单失败", errNo, errMsg, errLogId);
						}
						if (orderId || outOrderNo) {
							console.log("支付失败", errNo, errMsg, orderId, outOrderNo);
						}
						console.log(errNo, errMsg);
						if (errNo == 4) {
							_this.$message.info('支付已取消');
							setTimeout(() => {
								_this.is_submit = false;
								uni.redirectTo({
									url: '/pages/my/myCoupon/myCouponDetail?id=' + outOrderNo
								})
							}, 800)
						} else {
							_this.is_submit = false;
							_this.$message.info('支付失败,请稍后重试');
						}
					},
					complete(err) {
						console.log(err);
					}
				});
			},
			changeAgreement() {
				this.status_show = !this.status_show;
			},
			valChange(e) {
				this.totalPrice = this.certificateInfo.price * e.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transaction {
		width: 100%;
		// height: 120rpx;
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0;
		background: #fff;
		z-index: 10;
		padding: 24rpx 24rpx 36rpx;
		.transaction_top {
			padding-left: 12rpx;
			.transaction_top_img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			.transaction_top_text {
				color: #FC5B03;
			}
		}
	}
	.money_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	
		.footer_le {
			.footer_le_1 {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #FC5B03;
	
				.footer_le_1_1 {
					font-weight: bold;
					font-size: 40rpx;
					color: #FC5B03;
				}
				.footer_le_1_2 {
					margin-left: 16rpx;
					color: #999;
					text-decoration: line-through;
					font-size: 30rpx;
				}
				.footer_le_1_3 {
					font-size: 26rpx;
				}
			}
			.box_info {
				margin-left: 28rpx;
			}
		}
	
		.footer_ri {
			display: flex;
			align-items: center;
	
			.footer_ri_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #1A66FA;
			}
	
			.footer_ri_2 {
				margin-left: 24rpx;
				width: 240rpx;
				height: 84rpx;
				background: #FC5B03;
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
			}
		}
	}
	.intro_info {
		margin: 100rpx 28rpx 28rpx;
		.intro_title {
			font-size: 40rpx;
			font-weight: 600;
		}
		.intro_date {
			font-size: 32rpx;
			color: #FC5B03;
			margin-top: 24rpx;
		}
		.intro_img {
			margin-top: 24rpx;
			image {
				width: 100%;
				height: auto;
				border-radius: 12rpx;
			}
		}
		.intro_content {
			margin-top: 24rpx;
			font-size: 28rpx;
			line-height: 32rpx;
		}
		.car_names {
			margin-top: 24rpx;
		}
	}
	.footer_le_2 {
		position: fixed;
		right: 32rpx;
		bottom: 250rpx;
		image {
			width: 48rpx;
			height: 48rpx;
			transform: translateY(5rpx);
		}
		.footer_le_2_1 {
			font-weight: 500;
			font-size: 26rpx;
			color: #FC5B03;
			transform: translateY(-5rpx);
		}
	}
	
	
	.customer_view {
		width: 100%;
		position: fixed;
		z-index: 99;
		height: 78rpx;
		top: 0;
		right: 0;
		// background: #FC5B03;
		background: linear-gradient(to right, #FC5B03, #FEB16A);
		color: #fff;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.customer_btn_text {
			font-size: 32rpx;
			margin-left: 16rpx;
		}
	}
</style>